<template>
  <!-- 主页底部tab -->
  <div class="bottom-bar">
    <i class="camera"></i>
    <ul class="tab-list">
      <li class="list-item">
        <div class="item-box examples" @touchstart="routerPush('/case')">
          <i class="icon"></i>
          <span class="text">精彩案例</span>
        </div>
      </li>
      <li class="list-item"></li>
      <li class="list-item">
        <div class="item-box services" @touchstart="routerPush('service')">
          <i class="icon"></i>
          <span class="text">服务支持</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {

    }
  },
  components: {

  }
}
</script>

<style scoped lang="stylus">

@import '../common/stylus/mixin.styl'
@import '../common/stylus/variable.styl'

.bottom-bar
  position fixed
  left 0
  bottom 0
  z-index 10
  width 100%
  height 50px
  bg-image('../common/images/bar-bg')
  background-size 100% 100%
  .tab-list
    display flex
    height 50px
    .list-item
      display flex
      align-items center
      flex 1  
      .item-box
        display flex
        flex-direction column
        margin auto
        .icon 
          width 23.5px
          height 22px
          background-size 100% 100%
          margin auto
        .text
          color #ffffff
          font-size $font-size-mini
      .examples
        .icon
          bg-image('../common/images/nice-examples')
        &.active
          .icon
            bg-image('../common/images/nice-examples-active')  
      .services
        .icon
          bg-image('../common/images/services-support')
        &.active
          .icon
            bg-image('../common/images/services-support-active') 
  .camera
    position absolute
    display block
    width 60px
    height 60px
    bg-image('../common/images/camera')
    background-size 100% 100%
    left 50% 
    transform translateX(-50%)
    bottom 0

</style>
